import styles from './style.module.css'
import { useEffect, useState, useRef } from 'react'
import {Button, message} from 'antd'


/**
 * 地图组件--基于baidu地图
 * @returns 地图组件
 */
const Map = () => {
  let mapInstance = null // 地图实例
  const mapRef = useRef() // 地图 ref

  // 地图初始化
  const mapInit = () => {
    const map = new BMapGL.Map(mapRef.current);
    const center = new BMapGL.Point(122.8655804310699, 40.99124008863558)
    const marker = new BMapGL.Marker(center, { title: '辽宁丰业农业发展有限公司' })
    map.centerAndZoom(center, 15)
    map.enableScrollWheelZoom(true)
    map.addOverlay(marker)
    
    marker.addEventListener('click', () => {
      message.success('点击农场')
    })


    mapInstance = map
  }

  // 初始化地图
  useEffect(() => {
    mapInit()
  }, [])

  return <div className={styles.Map} id="map-container" ref={mapRef}></div>
}

export default Map
